<template>
    <div class="page404">
        <span class="text-center">{{ url }}</span>
        <br>
        <span class="text-center">This page does not exist.</span>
    </div>
</template>

<script>
import { useRoute } from 'vue-router'

export default {
    name: "Page404",
    setup() {
        const route = useRoute();

        return {
            url: route.path
        };
    }
}
</script>

<style scoped>
.page404 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.text-center {
    color: rgb(189, 0, 0);
    font-size: 3rem;
}
</style>